<template>
  <div class="imgUpOuter">
    <el-col :span="24">
      <el-row class="bgTitle">
        <el-col :span="24">{{ title }}</el-col>
      </el-row>
      <el-row style="margin: 10px 0">
        <el-upload class="avatar-uploader" list-type="picture-card" action :http-request="uploadFile" ref="upload"
          :file-list="fileList" :show-file-list="false" :headers="headers">
          <template #default style="margin-left: 10px">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </template>
        </el-upload>
      </el-row>
      <el-row>
        <el-col :span="24" style="display: flex; align-items: center; justify-content: center">
          <el-button type="danger" size="small" round @click="delImg">
            删除
          </el-button>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import axios from "../service/request";
import { findImgApi, delImgApi } from "../service/apiModule/bgImgApi";

onMounted(() => {
  getBgImg();
});

const props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
});

const { title } = toRefs(props);

let imageUrl = ref("");

// 请求头
const headers = reactive({ "Content-Type": "multipart/form-data" });
//上传后的文件列表
const fileList: any = [];

// 获取背景图
const getBgImg = async () => {
  const { data: res } = await findImgApi();
  
  res.data.forEach((item: any) => {
    if (item.bgTitle === title.value) {
      imageUrl.value = item.imgSrc;
    }
  });
};

// 上传
const uploadFile = async (item: any) => {
  //上传文件的需要formdata类型;所以要转
  let formData = new FormData();
  // formData. append (name, value, filename);
  console.log(title.value)
  formData.append("file", item.file, `${title.value}.jpg`);
  axios({
    url: "/manage/upImg",
    method: "POST",
    timeout: 6000,
    data: formData,
    headers: {
      "content-type": "multipart/form-data",
    },
  })
    .then((res) => {
      ElMessage.success("上传成功！");
      getBgImg();
    })
    .catch((err) => {
      ElMessage.error("上传失败!");
    });
};

// 删除图片
const delImg = async () => {
  imageUrl.value = "";
  const { data: res } = await delImgApi({ bgTitle: title.value });
  if (res.status.code !== 200) {
    ElMessage.error("删除失败!");
    console.log(res);
  } else {
    ElMessage.success("删除成功!");
  }
};
</script>

<style lang="scss" scoped>
.imgUpOuter {
  margin-left: 40px;

  .bgTitle {
    width: 100%;
    text-align: center;
  }

  .el-upload {
    margin: 10px 0;
  }

  .avatar {
    width: 140px;
    height: 150px;
  }
}

.el-uploader {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: var(--el-transition-duration-fast);
  margin: 10px 0;
}

.el-uploader:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
